<template>
  <div class="icons">
      <div class="icons__item" v-for="(item,index) of iconList" :key="index">
        <img class="icons__item__img" :src="item.img" />
        <p class="icons__item__desc">{{item.desc}}</p>
      </div>
  </div>
  <div class="gap"></div>
</template>

<script>
export default {
  name: 'HomeIcons',
  setup () {
    const iconList = [
      { img: 'https://www.dell-lee.com/imgs/vue3/超市.png', desc: '超市便利' },
      { img: 'https://www.dell-lee.com/imgs/vue3/菜市场.png', desc: '菜市场' },
      { img: 'https://www.dell-lee.com/imgs/vue3/水果店.png', desc: '水果店' },
      { img: 'https://www.dell-lee.com/imgs/vue3/鲜花.png', desc: '鲜花绿植' },
      { img: 'https://www.dell-lee.com/imgs/vue3/医药健康.png', desc: '医药健康' },
      { img: 'https://www.dell-lee.com/imgs/vue3/家居.png', desc: '家居时尚' },
      { img: 'https://www.dell-lee.com/imgs/vue3/蛋糕.png', desc: '烘培蛋糕' },
      { img: 'https://www.dell-lee.com/imgs/vue3/签到.png', desc: '签到' },
      { img: 'https://www.dell-lee.com/imgs/vue3/大牌免运.png', desc: '大牌免运' },
      { img: 'https://www.dell-lee.com/imgs/vue3/红包.png', desc: '红包套餐' }
    ]
    return { iconList }
  }
}
</script>

<style lang="scss" scoped>
@import "../../style/variables.scss";

.icons {
  display: flex; //弹性布局
  flex-wrap: wrap; //弹性布局换行
  margin-top: .16rem;
  &__item {
    width: 20%; //弹性布局宽度，每行5个
    &__img {
      display: block;
      margin: 0 auto;
      height: .4rem;
      width: .4rem;
    }
    &__desc {
      text-align: center;
      font-size: .12rem;
      margin: .06rem 0 .16rem 0;
      color: $content-font-color;
    }
  }
}
.gap {
  height: .1rem;
  margin: 0 -.18rem;
  background: $content-bg-color;
}
</style>
